<template>
    <div-row :obj="obj" class="content-wrapper text-picture" :class="obj.animateTitle? 'wow '+obj.animateTitle : ''">
        <div
            class="icon-box"
            :style="{background: obj.background}"

        >
            <div class="icon-title">
                <p v-html="obj.title"/>
                <span v-if="obj.tips">{{ obj.tips }}</span>
            </div>
            <h2 class="icon-num">
                <countTo :start-val="0" :end-val="obj.number" :duration="3000"/>
            </h2>
            <p v-html="obj.smTitle"/>
        </div>
    </div-row>
</template>
<script>
import animate from '@/mixins/animate'
import countTo from 'vue-count-to'
export default {
    name: 'IconBox',
    components: { countTo },
    mixins: [animate]
}
</script>
<style lang="scss" scoped>
    .icon-box{
        padding: 20px;
        border-radius: 4px;
        color: rgb(255, 255, 255);
        height: 158px;
        background: rgb(49, 180, 141);
        .icon-title{
            position:relative;
            p{
                overflow: hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
                padding-right: 30px;
                font-weight: normal;
                line-height: 20px;
                font-size: 14px;
                margin: 0;
            }
            span{
               position: absolute;
                right: 0px;
                top: 0px;
                padding: 2px 4px;
                border-radius: 4px;
                font-size: 12px;
                background: rgba(255, 255, 255, 0.3);
            }
        }
        .icon-num{
            margin: 16px 0px;
            font-size: 32px;
            font-weight: 500;
            line-height: 30px
        }
    }
</style>

